I am a newbie in HTML, CSS. I am working on a simple web app using CherryPy and ran into the following problem. The page I serve has a h1 title and a form for search box. I would like to lay them out on the same line with the h1 left aligned and the form right align, like this:

My H1 Title here                                       [         ] Search

But instead, I got them in two separate lines:

My H1 Title here                                       
                                                       [         ] Search

My HTML code:

<span class="header">
    <h1>${pagetitle}</h1>
</span>

<span class="searchbox">
    <form>
        <input type="text" name="searchterm">
        <input type="submit" value="Search">
    </form>
</span>

My CSS:

span.header {
    text-align: left;
}

span.searchbox {
    text-align: right;
}

I have tried to work around using table, but was told to use span to do the right thing. I appreciate your help to set it right.